<%--
  Created by IntelliJ IDEA.
  User: Mr.G
  Date: 2019/1/2
  Time: 11:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
</head>
<body>
<form class="layui-form" lay-filter="per2Form" id="menuforon" style="padding: 10px 5px">
    <input type="hidden" id="menulevel" name="menulevel" value="0">
    <input type="hidden" id="tt" name="parentid" value="-1">
    <div class="layui-form-item">
        <label class="layui-form-label">权限类别</label>
        <div class="layui-input-block">
            <select name="liebie" id="leibie" lay-filter="leibie">
                <option value="1">一级类别</option>
                <option value="2">二级类别</option>
                <option value="3">三级类别</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item" id="erjisel" style="display: none">
        <label class="layui-form-label">一级类别</label>
        <div class="layui-input-block">
            <select name="parentid" id="parentid" lay-filter="erji">
            </select>
        </div>
    </div>
    <div class="layui-form-item" id="sanji" style="display: none">
        <label class="layui-form-label">二级类别</label>
        <div class="layui-input-block">
            <select name="sanjisel" id="sanjisel" lay-filter="sanjisel">
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">权限名称</label>
        <div class="layui-input-block">
            <input type="text" name="menuname" id="perName"  placeholder="请输入权限名称" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">地址</label>
        <div class="layui-input-block" >
            <input type="text" name="oaaction" placeholder="请输入链接地址" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label for="oaimgpath" class="layui-form-label">选择图标</label>
        <div class="layui-input-block">
            <input type="text" id="oaimgpath" name="oaimgpath" lay-filter="iconPicker" class="layui-input">
        </div>
    </div>


    <script>
        var zhongzhuan = 0;

        layui.config({
            base: '${path}/assets/layui/lay/modules/'
        }).extend({
            iconPicker : 'iconPicker'
        })

         layui.use(['form','iconPicker'], function () {
            var iconPicker = layui.iconPicker;
            var form = layui.form;

            /*选择图标*/
            iconPicker.render({
                // 选择器，推荐使用input
                elem: '#oaimgpath',
                // 数据类型：fontClass/unicode，推荐使用fontClass
                type: 'fontClass',
                // 是否开启搜索：true/false
                search: true,
                // 是否开启分页
                page: true,
                // 每页显示数量，默认12
                limit: 12,
                // 点击回调
                click: function (data) {
                    console.log(data);
                }
            });


             /*监听"权限类别"下拉框选择事件*/
             form.on('select(leibie)', function(data){
                 console.log(data)
                 
                 if (data.value == 1){
                     $("#erjisel").hide(200);
                     $("#sanji").hide(200);
                     $("#tt").attr("name","parentid");
                     $("#tt").attr("value","-1");
                     $("#menulevel").attr("value","0");
                 }else if (data.value == 2){
                     $("#sanji").hide(200);
                     $("#erjisel").show(200,function () {
                         setTimeout(function () {
                             $("#parentid").empty();
                             $("#sanjisel").empty();
                             $.get("${path}/menuforon/yiji",function(yiji){
                                 var cishu = 0;
                                 $.each(yiji,function(){
                                     if (cishu == 0){
                                         if (zhongzhuan == 0){
                                             $("#tt").attr("name","parentid");
                                             $("#tt").attr("value",this.menuid);
                                         } else{
                                             $("#tt").attr("name","parentid");
                                             $("#tt").attr("value",zhongzhuan);
                                         }
                                     }
                                     var opt = $("<option></option>").appendTo("#parentid");
                                     opt.text(this.menuname).val(this.menuid);
                                     cishu++;
                                 });
                                 form.render();
                             });
                         },240)
                     })

                     setTimeout(function () {

                     },240)
                     $("#menulevel").attr("value","1");
                 }else if(data.value == 3){
                     $("#menulevel").attr("value","2");
                     $("#erjisel").show(200,function () {

                     })
                     $("#sanji").show(200,function () {
                         setTimeout(function () {

                             $("#parentid").empty();
                             $("#sanjisel").empty();
                             $.get("${path}/menuforon/yiji",function(yiji){
                                 $.each(yiji,function(){

                                     var opt = $("<option></option>").appendTo("#parentid");
                                     opt.text(this.menuname).val(this.menuid);
                                 });
                                 form.render();
                             });
                         },240)

                         //二级类别
                         setTimeout(function () {

                             var parentid = $("#parentid  option:selected").val();
                             console.log("parentid:"+parentid)
                             $.get("${path}/menuforon/erji",{parentid:parentid},function(yiji){

                                 $("#sanjisel").empty();
                                 var cishu = 0;
                                 $.each(yiji,function(){


                                     if (cishu == 0){
                                         if($("#sanji").is(":visible")){
                                             $("#tt").attr("name","parentid");
                                             $("#tt").attr("value",this.menuid);
                                         }
                                     }
                                     var opt = $("<option></option>").appendTo("#sanjisel");
                                     opt.text(this.menuname).val(this.menuid);
                                     cishu++;
                                 });
                                 form.render();
                             });
                         },300)
                     })
                 }
             })
             /*监听"一级类别的下拉框"*/
                form.on('select(erji)',function (data) {
                    //二级类别
                    $("#tt").attr("name","");
                    $("#tt").attr("value","");

                    if($("#sanji").is(":hidden")){
                        $("#tt").attr("name","parentid");
                        $("#tt").attr("value",data.value);
                    }

                    console.log(data)
                    zhongzhuan = data.value;
                    $.get("${path}/menuforon/erji",{parentid:data.value},function(yiji){
                        $("#sanjisel").empty();
                        var cishu = 0;
                        $.each(yiji,function(){
                            if(cishu == 0){
                                if($("#sanji").is(":visible")){
                                    console.log("asdfasdf "+this.menuid)
                                    $("#tt").attr("name","parentid");
                                    $("#tt").attr("value",this.menuid);
                                }
                            }
                            var opt = $("<option></option>").appendTo("#sanjisel");
                            opt.text(this.menuname).val(this.menuid);
                            cishu ++;
                        });
                        form.render();
                    });
                })
             /*监听"二级类别的下拉框"*/
                form.on("select(sanjisel)",function (data) {
                    $("#tt").attr("name","parentid");
                    $("#tt").attr("value",data.value);
                })
             form.render()
        });
    </script>

</form>
</body>
</html>
